<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Leaflet</title>
    <link
      rel="stylesheet"
      href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
      integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
      crossorigin=""
    />
    <script
      src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
      integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
      crossorigin=""
    ></script>
    <style>
      #map {
        height: 100vh;
      }
      .text-icon {
        color: red;
      }
    </style>
  </head>

  <body>
    <div id="map"></div>

    <script>
      const calculateBearing = (lat1, lon1, lat2, lon2) => {
        const dLon = (lon2 - lon1) * (Math.PI / 180);
        const y = Math.sin(dLon) * Math.cos(lat2 * (Math.PI / 180));
        const x =
          Math.cos(lat1 * (Math.PI / 180)) * Math.sin(lat2 * (Math.PI / 180)) -
          Math.sin(lat1 * (Math.PI / 180)) *
            Math.cos(lat2 * (Math.PI / 180)) *
            Math.cos(dLon);
        let bearing = Math.atan2(y, x) * (180 / Math.PI);

        // 将方位角规范化为0到360度之间
        if (bearing < 0) {
          bearing = (bearing + 360) % 360;
        }

        return bearing;
      };

      const map = L.map("map").setView([28.23, 112.93], 13);

      L.tileLayer(
        "http://wprd01.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=7",
        {
          minZoom: 11,
          maxZoom: 16,
          attribution:
            '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
        }
      ).addTo(map);

      const marker = L.marker([28.23, 112.93]).addTo(map);

      L.marker([28.33, 113.03], {
        icon: L.divIcon({
          html: '<img src="./icons/car0.png" alt="Marker" style="transform: rotate(-30deg);">',
          className: "my-div-icon",
        }),
      }).addTo(map);

      L.marker([28.33, 112.93], {
        icon: L.divIcon({
          html: '<img src="./icons/car0.png" alt="Marker" style="transform: rotate(45deg);">',
          className: "my-div-icon",
        }),
        draggable: true,
      }).addTo(map);
    </script>
  </body>
</html>
